<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <!--<div style="height: 4px;position: fixed;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>-->
    <div class="about-us" v-show="show">
      <mt-loadmore :distanceIndex="4" @top-status-change="handleTopChange" :topDistance="30" :bottomDistance='30' :maxDistance="40" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :bottomAllLoaded = bottomsta>
        <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus === 'loading'" class="color_top">Loading...</span>
        </div>
        <div class="content-box">
          <ul class="cooper-box">
            <li v-for="(item,index) in logo" ><img :src="app+item.ba_image"></li>
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="text-box">
          <li class="text" v-for="(item,index) in store">
            <div style="width:100%;height:160px;"><img :src="app+item.st_image" style="width:100%;height:100%"/></div>
            <div class="content-box txt">
              {{item.st_intro}}
            </div>
          </li>
        </ul>
        <div slot="bottom" class="mint-loadmore-bottom">
          <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'addJoin',
    data () {
      return {
        show: false,
        logo: [],
        store: [],
        app: '',
        limit: 2,
        last_id: 0,
        loadingBottomShow: false,
        topStatus: 'loading',
        bottomsta: false,
        bottomAllLoaded: false,
        research: true,
        messageSta: true
      }
    },
    methods: {
      handleTopChange (status) {
        this.topStatus = status
      },
      cooperation: function () {
      },
      loadTop () {
        this.messageSta = true
        this.research = true
        this.last_id = 0
        this.bottomsta = false
        this.cooperAjax('reflsh')
      },
      loadBottom () {
        this.loadingBottomShow = true
        if (this.research === true) {
          this.cooperAjax('')
        } else {
          this.loadingBottomShow = false
          this.$refs.loadmore.onBottomLoaded()
        }
      },
      cooperAjax: function (title) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            last_id: thisObj.last_id,
            limit: thisObj.limit
          },
          slient: true,
          userinfo: false,
          url: 'Service/getStoreList',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.show = true
              if (thisObj.last_id === 0) {
                thisObj.logo = res.result.logo
                thisObj.app = res.result.app
              }
              if (title === 'reflsh') {
                thisObj.store = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              if (res.result.store < thisObj.limit) {
                thisObj.bottomsta = true
                thisObj.research = false
              } else {
                thisObj.last_id = res.result.store[res.result.store.length - 1].st_id
              }
              thisObj.store = thisObj.store.concat(res.result.store)
            } else {
              thisObj.show = true
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        this.$chaos.setTitle('合作商户')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '合作商户')
        this.$store.commit('footerShow', false)
        thisObj.cooperAjax('')
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .mint-loadmore-top{
    text-align: center;
    line-height: 33px;
  }
  .about-us{
    padding: 20px 15px 0px;
    margin-top: 25px;
    overflow: hidden;
  }
  .cooper-box li{
    float: left;
    width: 33%;
    margin-bottom: 5px;
  }
  .cooper-box li img{
    width: 94%;
    height: 60px
  }
  .cooper-box{
    margin-top: 15px;
  }
  .cooper-box li:nth-child(2),.cooper-box li:nth-child(5),.cooper-box li:nth-child(8){
    text-align: center;
  }
  .cooper-box li:nth-child(3),.cooper-box li:nth-child(6),.cooper-box li:nth-child(9){
    text-align: right;
  }
  .text-box li div:nth-child(1) img{
    width: 100%;
    height: auto;
  }
  .text-box{
    clear: both;
    overflow: scroll;
  }
  .text-box li{
    /*height:160px;*/
    margin-bottom: 15px;
  }
  .text-box li img{
    width:100%;
    height:100%;
  }
  .text-box .txt{
    padding-top: 10px;
    padding-bottom: 10px;
    color: #222;
  }
</style>
